<template>
	<div class="container">
		<div class="userinfo">
			<div class="avatar" v-if="userinfo.sex==0"><img :src="userinfo.head_img==''?nvtou:userinfo.head_img" alt="用户头像"></div>
			<div class="avatar" v-if="userinfo.sex==1"><img :src="userinfo.head_img==''?nantou:userinfo.head_img" alt="用户头像"></div>
			<div class="user_content">
				<span class="username">{{userinfo.name}}</span>
				<div class="gender">
					<i class="iconfont icon-nan" v-if="userinfo.sex==1" style="color: #2CCFC7;"></i>
					<i class="iconfont icon-nv" v-if="userinfo.sex==0" style="color: #EC748B;"></i>
				</div>
				<br>
				<span class="age">{{userinfo.birthday}}岁&emsp; </span>
				<span class="phone">{{userinfo.phone}}</span>
			</div>
			<div class="symptom" v-if="niledinut[0]">
				<div class="main">主述症状<br>
					<p >{{niledinut[0].niledinut}}</p>
				</div>
				<div class="discribe" v-if="show">问题描述<br>
					<p>{{niledinut[0].description}}</p>
					<span class="show" @click="open" v-if="showbtn">展开</span>
				</div>
				<div class="discribe-on" v-if="!show">问题描述<br>
					<p>{{niledinut[0].description}}</p>
					<span class="hide" @click="open">收起</span>
				</div>
			</div>
			<div class="positions" v-if="result[0].title">{{result[0].title}}</div>
			<p class="title">评估结果:</p>
			<div style="min-height: 40vh;">
				<div class="reult" v-if="recordList" v-for="(item,index) in recordList.no_can_pstats" :key="index">
					<div style="clear: both;"></div>
					<div class="results">
						<span class="article" v-html="item.no_can_pstats"></span>
					</div>
				</div>
			</div>
			<div class="btns"  v-if="!nodata">
				<div style="clear: both;"></div>
				<div class="restart" @click="restart">重新评估</div>
				<div class="solution" @click="getSolution">解决方案</div>
			</div>
		</div>
		<van-empty id="empty" description="您的身体很健康" v-if="nodata">
		  <!-- <van-button round type="danger" class="bottom-button" @click="goAssessment">
		    前往评估
		  </van-button> -->
			<van-button round color="linear-gradient(to right, #1FCAD2, #15B3CE, #0384C4)" class="bottom-button" @click="goHome">
			  返回首页
			</van-button> 
		</van-empty>
	</div>
</template>

<script>
	import { Notify } from 'vant';
	export default{
		data(){
			return{
				show:true,
				noDetail:true,
				nantou:'http://qnkf.laigl.com/mobilepng/nantou.png',
				nvtou:'http://qnkf.laigl.com/mobilepng/nvtou.png',
				userinfo:[],
				result:[],
				niledinut:[],
				showbtn:false,
				recordList:[],
				nodata:true
			}
		},
		methods:{
			// 控制文本显示隐藏
			open(){
				this.show=!this.show
				console.log(this.show)
			},
			// 重新评估
			restart(){
				this.$router.push('./assessment?user_id='+this.$route.query.user_id)
			},
			//查看解决方案
			 getSolution(){
				 this.$router.push('./solutionChart?id='+this.$route.query.id)
			 },
			 // 前往评估
			goAssessment(){
				this.$router.push('./assessment?user_id='+this.$route.query.user_id)
			},
			goHome(){
				this.$router.push('./solution')
			},
			// 获取评估结果
			getRecord(){
					this.$axios.post('assessment/createrecord',{
						openid:localStorage.getItem('openid'),
						niledinut_id:this.$route.query.user_id,
						assessment_id:this.$route.query.id,
						reasonswhy:localStorage.getItem('cantaction')
					})
					.then(res=>{
						let recordId = res.data.data.id
						this.$axios.post('assessment/list_no_can_pstats',{
							openid:localStorage.getItem('openid'),
							niledinut_id:this.$route.query.user_id,
							id:recordId,
							in_id:localStorage.getItem('cantaction')
						})
						.then(res=>{
							console.log(res)
							if(res.data.code==2000){
								if(res.data.data.no_can_pstats.length==0){
									// Notify({ type: 'success', message: '很健康' });
									this.nodata = true
								}else{
									this.nodata = false
									this.recordList = res.data.data
								}
							}else{
								Notify({ type: 'danger', message: res.data.msg });
							}
						})
					})
			},
			// 获取解决方案
			getRecovery(niledinut_id){
				let openid = localStorage.getItem('openid')
				this.$axios.post('rehabilitation/index',{openid,niledinut_id})
				.then(res => {
					this.result = res.data.data.reasonswhy
					this.userinfo = res.data.data.user_info
					this.niledinut = res.data.data.niledinut
					console.log(this.result)
					if(this.niledinut[0].description.length>17){
						this.showbtn = true
					}else{
						this.showbtn = false
					}
				});
			}
		},
		created() {
			this.show=true
			this.getRecord()
			this.getRecovery(this.$route.query.user_id)
		}
		
	}
</script>

<style scoped lang="less">
	.container{
		padding: 1rem 2rem;
		#empty{
			margin-left: 0;
		}
		.positions{
			border-bottom: .1rem solid #F2F3F5;
			padding: 1rem 0 .5rem 0;
			font-size: 1.1rem;
			font-weight: 700;
			margin-bottom: 1.5rem;
			float: left;
			width: 85vw;
		}
		.userinfo{
			.avatar{
				float: left;
				width: 4.85rem;
				height: 4.85rem;
				overflow: hidden;
				border-radius: 4rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.user_content{
				float: left;
				box-sizing: border-box;
				padding: .5rem;
				width: 70%;
				height: 3rem;
				padding:1rem .5rem;
				margin-left: .5rem;
				.username,.gender{
					display: inline-block;
				}
				.username{
					font-size: 1.1rem;
					font-weight: 700;
					margin-right: .5rem;
					margin-bottom: .2rem;
				}
				.gender{
					font-weight: 700;
					i{
						font-size: 1.3rem;
					}
				}
				.age,.phone{
					color: #ddd;
					font-size: 1.1rem;
				}
			}
			.symptom{
				float: left;
				margin-top: .5rem;
				width: 85vw;
				min-height:8rem;
				border-radius: .4rem;
				background:linear-gradient(to right,#F0F1F5,#F7F7F9);
				box-sizing: border-box;
				padding: .9rem .6rem .9rem .6rem;
				.main,.discribe,.discribe-on{
					font-size: 1.1rem;
					margin-left: .5rem;
					p{
						font-size: 1rem;
						width: 71.5vw;
						font-weight:500;
						letter-spacing:.1rem;
						color: #C7CAD8;
						margin: .4rem 0;
					}
				}
				.discribe-on{
					.hide{
						font-size: 1rem;
						display: inline-block;
						position: absolute;
						right: .3rem;
						bottom: 0;
						font-weight: 700;
					}
				}
				.discribe{
					position: relative;
					p{
						overflow: hidden;
						text-overflow: ellipsis;
						display:-webkit-box; //作为弹性伸缩盒子模型显示。
						-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
						-webkit-line-clamp:1; //显示的行
					}
					.show{
						font-size: 1rem;
						display: inline-block;
						position: absolute;
						right: .5rem;
						bottom: 0;
						font-weight: 700;
					}
				}
				.discribe-on{
					position: relative;
				}
			}
			.title{
				font-size: 1.1rem;
				font-weight: 600;
				margin-bottom: 1rem;
				float: left;
			}
			.reult{
				width: 100%;
				// height: 22rem;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				width: 85vw;
				margin-top: .3rem;
				.results{
					// padding-top: .5rem;
					.article{
						// text-indent: 2rem;
						line-height: 100%;
						letter-spacing: .02rem;
						font-weight: 600;
						font-family: '微软雅黑';
						color: #4f505d;
					}
				}
			}
			.btns{
				display: flex;
				justify-content: flex-start;
				margin-top: 5vh;
				margin-bottom: 4rem;
				.restart{
					width: 10rem;
					height: 2rem;
					border-radius: 2rem;
					background-color: #fff;
					outline: none;
					padding:.5rem 0;
					margin-left: 1rem;
					line-height: 2rem;
					border: .1rem solid #B7B8C3;
					text-align: center;
				}
				.solution{
					width: 10rem;
					height: 2rem;
					border-radius: 2rem;
					background:linear-gradient(to right, #1DC4D1,#058AC5);
					outline: none;
					padding:.5rem 0;
					margin-left: 1rem;
					line-height: 2rem;
					color: #fff;
					border: none;
					text-align: center;
				}
			}
		}
		
	}
</style>
